---
layout: single
property_name: vertical-align
---

<section id="vertical-align" class="property">
  <header class="property-header">
    <nav class="property-links">
      <a class="property-links-direct" href="{{site.url}}/property/vertical-align/" data-property-name="vertical-align" data-tooltip="Single page for this property">Permalink</a>
      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="vertical-align">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/vertical-align" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="property-name">
      <a href="#vertical-align"><span>#</span>vertical-align</a>
    </h2>
    <div class="property-description">
      <p>Defines how an inline or table-cell element aligns vertically.</p>

    </div>

  </header>



    <style type="text/css">.vertical-align .va-span { display: inline;padding: 0 0.25em; }.vertical-align .va-image { height: 32px;width: 32px; }</style>


    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="vertical-align: baseline;">vertical-align: baseline;</code>
        </p>
        <div class="example-description">
          <p>The element is aligned with the <strong>baseline</strong> of the parent.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div vertical-align " id="vertical-align-baseline"><p class="block"><span class="block block--alpha va-span">Some text before</span> <img class="va-image" src="/images/jt.png"> <span class="block block--alpha va-span">some text after</span>.</p></div>
        </div>
      </aside>
        <style type="text/css">#vertical-align-baseline .va-image { vertical-align: baseline; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="vertical-align: sub;">vertical-align: sub;</code>
        </p>
        <div class="example-description">
          <p>The element is aligned with the <strong>subscript baseline</strong> of the parent.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div vertical-align " id="vertical-align-sub"><p class="block"><span class="block block--alpha va-span">Some text before</span> <img class="va-image" src="/images/jt.png"> <span class="block block--alpha va-span">some text after</span>.</p></div>
        </div>
      </aside>
        <style type="text/css">#vertical-align-sub .va-image { vertical-align: sub; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="vertical-align: super;">vertical-align: super;</code>
        </p>
        <div class="example-description">
          <p>The element is aligned with the <strong>superscript baseline</strong> of the parent.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div vertical-align " id="vertical-align-super"><p class="block"><span class="block block--alpha va-span">Some text before</span> <img class="va-image" src="/images/jt.png"> <span class="block block--alpha va-span">some text after</span>.</p></div>
        </div>
      </aside>
        <style type="text/css">#vertical-align-super .va-image { vertical-align: super; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="vertical-align: text-top;">vertical-align: text-top;</code>
        </p>
        <div class="example-description">
          <p>The element is aligned with the <strong>top</strong> of the parent&#39;s element <strong>font</strong>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div vertical-align " id="vertical-align-text-top"><p class="block"><span class="block block--alpha va-span">Some text before</span> <img class="va-image" src="/images/jt.png"> <span class="block block--alpha va-span">some text after</span>.</p></div>
        </div>
      </aside>
        <style type="text/css">#vertical-align-text-top .va-image { vertical-align: text-top; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="vertical-align: text-bottom;">vertical-align: text-bottom;</code>
        </p>
        <div class="example-description">
          <p>The element is aligned with the <strong>bottom</strong> of the parent&#39;s element <strong>font</strong>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div vertical-align " id="vertical-align-text-bottom"><p class="block"><span class="block block--alpha va-span">Some text before</span> <img class="va-image" src="/images/jt.png"> <span class="block block--alpha va-span">some text after</span>.</p></div>
        </div>
      </aside>
        <style type="text/css">#vertical-align-text-bottom .va-image { vertical-align: text-bottom; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="vertical-align: middle;">vertical-align: middle;</code>
        </p>
        <div class="example-description">
          <p>The element is aligned with the <strong>baseline</strong> <em>plus</em> half the <strong>x-height</strong> of the parent.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div vertical-align " id="vertical-align-middle"><p class="block"><span class="block block--alpha va-span">Some text before</span> <img class="va-image" src="/images/jt.png"> <span class="block block--alpha va-span">some text after</span>.</p></div>
        </div>
      </aside>
        <style type="text/css">#vertical-align-middle .va-image { vertical-align: middle; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="vertical-align: top;">vertical-align: top;</code>
        </p>
        <div class="example-description">
          <p>The element is aligned with the <strong>top</strong> of the <strong>line</strong>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div vertical-align " id="vertical-align-top"><p class="block"><span class="block block--alpha va-span">Some text before</span> <img class="va-image" src="/images/jt.png"> <span class="block block--alpha va-span">some text after</span>.</p></div>
        </div>
      </aside>
        <style type="text/css">#vertical-align-top .va-image { vertical-align: top; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="vertical-align: bottom;">vertical-align: bottom;</code>
        </p>
        <div class="example-description">
          <p>The element is aligned with the <strong>bottom</strong> of the <strong>line</strong>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div vertical-align " id="vertical-align-bottom"><p class="block"><span class="block block--alpha va-span">Some text before</span> <img class="va-image" src="/images/jt.png"> <span class="block block--alpha va-span">some text after</span>.</p></div>
        </div>
      </aside>
        <style type="text/css">#vertical-align-bottom .va-image { vertical-align: bottom; }</style>
    </section>

</section>
